import React, { Component } from 'react';
import { Row, Form, Input, Button, message, FormInstance } from 'antd';
import styles from './index.less';
import { history } from 'umi';
import CustomInputNumber from '@/components/custom_input_number';
import { observer } from 'mobx-react';
import { userStore } from '@/stores/user';
import { Md5, RuleUtils } from 'xo-web-base';

@observer
export default class Login extends Component<any> {
  form = React.createRef<FormInstance>();
  onFinish = async (values: any) => {
    const { account, password } = values;
    const result = await userStore.login(account, password);
    if (result) {
      message.success('登录成功');
      history.push('/');
    }
  };
  // 跳注册页
  goReigsterPage = () => {
    history.push('./register');
  };

  render() {
    const { loading } = userStore;
    const { account, password } = this.props.location?.state ?? {};
    return (
      <div>
        <Row justify="space-between">
          <Row className={styles.title_wrap}>
            <div className={styles.title}>登录</div>
            <div className={styles.border}></div>
          </Row>
          <div onClick={this.goReigsterPage} className={styles.right_wrap}>
            没有账号去注册
          </div>
        </Row>
        <Form
          name="normal_login"
          className={styles.login_form}
          initialValues={{ remember: true }}
          onFinish={this.onFinish}
          ref={this.form}
        >
          <Form.Item
            name="account"
            initialValue={account}
          >
            <Input placeholder="账号" maxLength={11} />
          </Form.Item>
          <Form.Item
            name="password"
            // rules={RuleUtils.pwdRules}
            initialValue={password}
          >
            <Input.Password placeholder="请输入密码" maxLength={16} />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className={styles.login_form_button}
              loading={loading}
            >
              登录
            </Button>

          </Form.Item>
        </Form>
      </div>
    );
  }
}
